<template>
  <div class="redact">
    <van-nav-bar
      title="智能核保助手"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- <div class="camera" @click="cameraClk">
      <img :src="imgSrc" alt="">
      <span>&nbsp;添加拍照</span>
    </div> -->

    <!-- <div class="countbox">
      <span>拍照上传：{{total}}</span>
      <span>OCR识别：{{total}}</span>
      <span>核保建议：0</span>
    </div> -->

    <div
      class="swipebox"
      v-for="(item, index) in ocrHistoryList"
      :key="index"
      @click="swipeClk(item)"
    >
      <p>
        <span>{{ item.createTime }}</span>
        <span class="name">&nbsp;&nbsp;{{ item.projectName }}</span>
      </p>
      <van-swipe-cell>
        <van-card :desc="item.recognize">
          <template #footer>
            <van-button size="small" color="#eb3433" plain round
              >&nbsp;&nbsp;&nbsp;编辑&nbsp;&nbsp;&nbsp;</van-button
            >
            <van-button
              @click="cameraClk"
              size="small"
              color="#eb3433"
              plain
              round
              >重新拍照</van-button
            >
          </template>
        </van-card>
        <template #right>
          <van-button
            @click="redactClk"
            color="#eb3433"
            square
            plain
            text="编辑"
            class="delete-button"
          />
          <van-button
            @click="delClk(item)"
            square
            text="删除"
            type="danger"
            class="delete-button"
          />
        </template>
      </van-swipe-cell>
    </div>

    <!-- :title="item.createTime + item.projectName" -->
    <!-- <div class="swipebox" v-for="(item,index) in ocrHistoryList" :key="index" @click="swipeClk(item)">
         <p>
          <span>{{item.createTime}}</span>
          <span class="name">&nbsp;&nbsp;{{item.projectName}}</span>
        </p>
        <van-swipe-cell>
          <van-card
            :desc="item.recognize"
          >
            <template #footer>
              <van-button @click="lookClk(item,index)" size="small" color="#eb3433" plain round>查看影像</van-button>
            </template>
          </van-card>
          <template #right>
            <van-button @click="redactClk" color="#eb3433" square plain text="编辑" class="delete-button" />
            <van-button @click="delClk(item)" square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
    </div> -->

    <div class="btnbox">
      <div class="btn2" @click="aiClk">查看核保结论</div>
    </div>

    <div class="foot"></div>
  </div>
</template>

<script>
import camera from "@/assets/img/icon/camera.png";
import { ImagePreview } from "vant";
import { listApi, removeApi } from "@/api/requestApi"; //调接口
export default {
  name: "redact",
  components: {},
  data() {
    return {
      imgSrc: camera,
      isShow: true,
      show: false,
      ocrHistoryList: [
        {
          createTime: "2023",
          projectName: "甲状腺",
          recognize: "dshfsdhfsjfgsgfhgdfgjsdgjfgj",
        },
      ],
      orcimgs: [],
      orcimgIndex: 0,
      total: 0,
      numberCodes: "",
    };
  },

  mounted() {
    this.listFn();
  },

  methods: {
    //获取历史记录
    listFn() {
      listApi()
        .then((res) => {
          if (res.data.resultCode === 200) {
            this.orcimgs = [];
            this.ocrHistoryList = res.data.data.ocrHistoryList;
            this.total = res.data.data.count;
            this.ocrHistoryList.forEach((item) => {
              this.orcimgs.push(item.filePath);
            });
          }
        })
        .catch((err) => {});
    },

    onClickLeft() {
      this.$router.go(-1);
    },

    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      Toast(item.name);
    },

    lookClk(item, index) {
      this.sceneImg(item, index);
    },

    swipeClk(item) {
      sessionStorage.setItem("baseContent", JSON.stringify(item));
      this.numberCodes = item.numberCodes;
    },

    // 图片预览
    sceneImg(item, index) {
      ImagePreview({
        images: this.orcimgs, //需要预览的图片 URL 数组
        showIndex: false, //是否显示页码
        loop: false, //是否开启循环播放
        startPosition: index, //图片预览起始位置索引
      });
    },

    cameraClk() {
      this.$router.push({ path: "/camera" });
    },

    //查看核保结论按钮
    aiClk() {
      if (this.numberCodes == "") {
        this.$toast("请选择一项");
        return false;
      }
      this.$router.push({ path: "/contents" });
    },

    redactClk() {
      this.$toast("编辑");
    },
    delClk(item) {
      removeApi(item.numberCode)
        .then((res) => {
          if (res.data.resultCode === 200) {
            this.$toast("删除成功");
            this.listFn();
          }
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped>
.redact {
  background-color: #f6f6f6;
}

.camera {
  display: flex;
  justify-content: center;
  margin: 20px auto;
  width: 70%;
  padding: 10px;
  border: 1px dashed #cecece;
  border-radius: 25px;
  color: #eb3433;
}

.camera img {
  width: 20px;
  height: 20px;
}

.countbox {
  margin: 20px auto;
  display: flex;
  justify-content: space-around;
  color: #d4b882;
  background-color: #fff9e7;
}

.countbox span {
  padding: 6px;
}

.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}

.swipebox {
  margin: 10px auto;
  background-color: #fff;
}

.swipebox p {
  text-align: left;
  margin-left: 10px;
  padding-top: 20px;
}

.swipebox .name {
  font-weight: bold;
}

.btnbox {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.btnbox div {
  width: 180px;
  height: 40px;
  line-height: 40px;
}

.btnbox .btn1 {
  background-color: #fff;
  border: 1px solid #eb3433;
  color: #eb3433;
  border-radius: 6px;
}

.btnbox .btn2 {
  overflow: hidden;
  background-color: #eb3433;
  border: 1px solid #eb3433;
  color: #fff;
  border-radius: 6px;
  z-index: 2;
}

.foot {
  height: 50px;
}

.swipebox:hover {
  border: 1px solid #eb3433;
}
</style>
